<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .imgList li {
      height: 500px;
    }

    .imgList li img {
      height: 100%;
    }
  </style>
</head>
<body>

<ul class="imgList">
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
</ul>

<script>

  /*董贞*/
  const imgArr = [
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/1.%E5%A4%A9%E9%AD%81%E6%98%9F_%E5%91%BC%E4%BF%9D%E4%B9%89_%E5%AE%8B%E6%B1%9F-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/2.%E5%A4%A9%E7%BD%A1%E6%98%9F_%E7%8E%89%E9%BA%92%E9%BA%9F_%E5%8D%A2%E4%BF%8A%E4%B9%89-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/3.%E5%A4%A9%E6%9C%BA%E6%98%9F_%E6%99%BA%E5%A4%9A%E6%98%9F_%E5%90%B4%E7%94%A8-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/4.%E5%A4%A9%E9%97%B2%E6%98%9F_%E5%85%A5%E4%BA%91%E9%BE%99_%E5%85%AC%E5%AD%99%E8%83%9C-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/5.%E5%A4%A9%E5%8B%87%E6%98%9F_%E5%A4%A7%E5%88%80_%E5%85%B3%E8%83%9C-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/6.%E5%A4%A9%E9%9B%84%E6%98%9F_%E8%B1%B9%E5%AD%90%E5%A4%B4_%E6%9E%97%E5%86%B2-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/7.%E5%A4%A9%E7%8C%9B%E6%98%9F_%E9%9C%B9%E9%9B%B3%E7%81%AB_%E7%A7%A6%E6%98%8E-5143178.png',
    'https://cdn.jsdelivr.net/gh/IceRain-mvc/cdn/img/8.%E5%A4%A9%E5%A8%81%E6%98%9F_%E5%8F%8C%E9%9E%AD_%E5%91%BC%E5%BB%B6%E7%81%BC-5143178.png']

  let imgList = [...document.querySelectorAll('img')];
  imgList.forEach((img, index) => img.dataset.src = imgArr[index]);
  let length = imgList.length;
  const lazyLoad = (function () {
    let count = 0;
    return function () {
      let deleteIndex = [];
      imgList.forEach((img, index) => {
        if (window.innerHeight > img.getBoundingClientRect().top) {
          deleteIndex.push(index);
          img.src = img.dataset.src;
          count++;
          if (count >= length) {
            document.removeEventListener('scroll', lazyLoad);
          }
        }
      });
      imgList = imgList.filter((img, index) => !deleteIndex.includes(index))
    }
  })();
  lazyLoad();
  document.addEventListener('scroll', lazyLoad);
</script>
</body>
</html>
